
<template>
  <div class="index-box" ref="index" >
    <div class="backBox">
        <span class="back" @click="back"><i class="el-icon-back"></i>返回</span>
    </div>
    <div class="shop-box" v-loading="loading">
      <div class="d-flex">
        <div class="left">
          <div class="title">配置信息</div>
          <el-form :model="setMsgForm" label-position="right" :rules="rules" ref="setMsgForm">
            <el-form-item label="视频留言:" prop="comment" label-width="155px">
               <el-input v-model="setMsgForm.comment" type="textarea" rows="5" autocomplete="off" ></el-input>
            </el-form-item>
           <el-form-item label="上传视频:" prop="thirdVideoId" label-width="155px"  >
              <div class="upload" style="display: flex;align-items: center;height: 40px;">
                    <div class="d-flex align-center">
                      <input type="file" id="fileUpload" accept="video/*" capture="camcorder" @change="fileChange($event)">
                      <!-- <label class="status">上传状态: <span>{{statusText}}</span></label> -->
                      <video style="height:40px;cursor:pointer" :src="videoUrl" v-if="videoUrl" @click="videoViewVisible = true"></video>
                    </div>
                   <!-- <div class="upload-type">
                      上传方式一, 使用 UploadAuth 上传:
                      <button @click="authUpload" :disabled="uploadDisabled">开始上传</button>
                      <button @click="pauseUpload" :disabled="pauseDisabled">暂停</button>
                      <button :disabled="resumeDisabled" @click="resumeUpload">恢复上传</button>
                      <span class="progress">上传进度: <i id="auth-progress">{{authProgress}}</i> %</span>
                    </div> -->
                  </div>

           </el-form-item>
          <!-- <el-form-item label="上传封面:" prop="image" label-width="155px"  style="width:100%" >
             <MyUpImg :imagePreview='setMsgForm.image' size="200"  imageSize="rectangle" @change="imageChange($event, 'image')"></MyUpImg>
             <p style="color:#e4393c">图片规格为：宽 200px、高200px、大小不能超过2mb</p>
           </el-form-item> -->
            <el-form-item label="发布地区:" prop="codes" label-width="155px">
                <el-cascader v-model="setMsgForm.codes" :props="areaProps"  placeholder="请选择发布地区" clearable class="textInput"  ref="cascaderAddr" @change="areaProps11" v-if="areaVisible"></el-cascader>
            </el-form-item>
            <el-form-item label="公开类型:" prop="isPublic" label-width="155px">
              <el-select v-model="setMsgForm.isPublic" clearable >
                  <el-option label="公开" value="1"></el-option>
                  <el-option label="私密" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发布用户:" prop="userType" label-width="155px">
               <el-radio-group v-model="setMsgForm.userType">
                  <el-radio label="3">系统特殊用户</el-radio>
                  <el-radio label="1">现有用户</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="系统特殊用户:" v-if="setMsgForm.userType=='3'" prop="customerId" label-width="155px">
               <el-button size="mini" @click="handleSelectUser('1')">请选择</el-button> <span v-if="customerName" class="selectCustomerName">{{customerName}}</span>
            </el-form-item>
            <el-form-item label="现有用户:" v-if="setMsgForm.userType=='1'" prop="customerId" label-width="155px">
               <el-button size="mini" @click="handleSelectUser('0')">请选择</el-button><span v-if="customerName" class="selectCustomerName">{{customerName}}</span>
            </el-form-item>

          </el-form>
        </div>
        <div class="right">

        </div>
      </div>
      <div class="d-flex justify-center" >
        <el-button type="primary" @click="hanleSubmit('setMsgForm')"  :loading="btnLoading" v-if="indexType != 'detail'">确 定</el-button>
      </div>
    </div>





    </el-dialog>

    <!-- 视频查看	 -->
    <el-dialog title="视频查看" width="1000px" :close-on-click-modal="false" v-dialogDrag :visible.sync="videoViewVisible" @close="videoViewVisible = false">
      <div style="text-align: center;">
        <video :src="videoUrl" controls></video>
      </div>
    </el-dialog>
    <!--	选择用户	-->
    <el-dialog :title="titleVisible" width="1000px" :close-on-click-modal="false" v-dialogDrag :visible.sync="userVisible" @close="userVisible = false">
      <div class="searchDialog d-flex" style="margin-bottom: 10px;">
          <el-input v-model="userForm.nickname" clearable placeholder="请输入用户名" size="small" style="width:250px;margin-right: 10px;"></el-input>
          <el-input v-model="userForm.telephone" clearable placeholder="请输入手机号" size="small" style="width:250px;margin-right: 10px;"></el-input>
          <el-button type="primary" @click="handleUserSearch()" size="small">查询</el-button>
      </div>
      <div class="tableDialog">
          <el-table :data="userList" style="width: 100%;"  border height="500"
            @select="handleSelect" ref="multipleTableAllocationUser" stripe size="small">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
             <el-table-column label="序号" type="index"  width="100" align="center"> </el-table-column>
             <el-table-column prop="nickname" label="用户名" align="center"></el-table-column>
             <el-table-column prop="telephone" label="手机号" align="center"></el-table-column>
          </el-table>
      </div>
      <div class="page">
        <MyPagination
          :total="userForm.total"
          :page.sync="userForm.pageNum"
          :limit.sync="userForm.pageSize"
          @pagination="userInfo"
        />
      </div>
      <div class="activeCheckedBox" style="margin-top:15px">
          <el-tag v-for="(tag,index) in userSelectList" :key="tag.customerId" closable @close="handleClose(tag,index)" type="primary" style="margin-right:5px;background-color: #fff;">
            {{tag.nickname}}({{tag.telephone}})
          </el-tag>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSureUser()" size="small" :loading="btnLoading">确 定</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
  import { videoEdit,videoDetail,getUploadAuth,getPlayAuth,customerList,videoAdd,getConfigDetail,updateOperationConfig,addGoodsOperationConfig,getCategoryGoodsList,getGoodsDetail,goodsInfo,releaseGoods,goodsCategoryList,applyHotGoods, } from '@/api/getData';
  import common from "@/api/api";
  import option from '../../common/option.js';
  import axios from 'axios'
  export default {
    name:'shopDetails',
    data() {
      let that = this;
      return {
        indexType:'',
        loading: false,
        btnLoading:false,
        areaVisible:false,
        id:'',//组件id
        typeList:[{typeKey:'1',name:'完全公开(所有人可见)'},{typeKey:'2',name:'私密(仅自己可见)'}],//类型列表

        /*		表单数据		*/
        setMsgForm: {
          id:undefined,
          comment:'',
          thirdVideoId:'',
          provinceCode:"",
          cityCode:'',
          isPublic:'',
          customerId:'',
          userType:'3',//1正常 3虚拟
          codes:[],
          status:'3'
        },
        customerName:'',
        /*		表单数据		*/
        rules: {
        	comment: [{required: true,message: '请填写视频留言',trigger: 'blur'}],
          thirdVideoId: [{required: true,message: '请上传视频',trigger: 'blur'}],
          codes: [{required: true,message: '请选择发布地区',trigger: 'blur'}],
          isPublic: [{required: true,message: '请选择公开类型',trigger: 'blur'}],
          userType: [{required: true,message: '请选择发布用户',trigger: 'blur'}],
          customerId: [{required: true,message: '请选择系统特殊用户',trigger: 'blur'}],
        },
        areaProps: {
          lazy: true,
          //checkStrictly: true,
          lazyLoad (node, resolve) {
            that.$axios({
              method: 'get',
              url: common.apihost+'/system/area/getList?pcode='+(node.value?node.value:'0'),
            }).then ((res) => {
              if (res.data.code == 200) {
                const nodes = res.data.data;
                nodes.forEach(item => {
                  item.value = item.code,
                  item.label = item.name,
                  item.leaf = item.level >= 2
                })
                resolve(nodes);
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        },

        timeout: '',
        partSize: '',
        parallel: '',
        retryCount: '',
        retryDuration: '',
        region: 'cn-shanghai',
        userId: '1675126931090259',
        file: null,
        authProgress: 0,
        uploadDisabled: true,
        resumeDisabled: true,
        pauseDisabled: true,
        uploader: null,
        statusText: '',
        videoUrl:'',
        videoViewVisible:false,

        userVisible:false,
        userList:[],
        userSelectList:[],
        userForm:{
          nickname:'',
          telephone:'',
          virtualUser:'1',
          total:0,
          pageNum:1,
          pageSize:10,
        },
        titleVisible:''
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    created() {
      this.getCategoryDetails({categoryKey:'operation_config_type'}).then(res=>{
          this.typeList = res.data;
        })
      this.id =  this.$route.query.id;
      this.indexType = this.$route.query.type;
      if(this.id){
        this.pageDetail = this.$route.query.type;
        this.setMsgForm.id = this.id;
        this.getVideoDetail();
      }else{
        this.areaVisible = true;
      }
    },
    methods: {
      areaProps11(){
        console.log(this.setMsgForm.codes)
      },
      handleSureUser(){
        if(this.userSelectList.length>1){
          this.$message.error('最多选中1个');
          return;
        }
        let customerId = [];
        for(let i=0;i<this.userSelectList.length;i++){
          customerId.push(this.userSelectList[i].customerId)
        };
        this.customerName = this.userSelectList[0].nickname+'('+this.userSelectList[0].telephone+')';
        this.setMsgForm.customerId = customerId.join(',');
        this.userVisible = false;
      },
      handleSelectUser(type){
        this.titleVisible = (type=='1'?'系统特殊用户':'现用用户');
        this.userForm.virtualUser = type;
        this.userVisible = true;
        this.userInfo();
      },
      handleClose(row,index){/*移除 分配用户 选中项*/
        this.userSelectList.splice(index,1);
        this.$refs.multipleTableAllocationUser.toggleRowSelection(row, false); //不选中
      },
      handleSelect(val,row){
        let index = '';
        for(let i=0;i<this.userSelectList.length;i++){
          if(this.userSelectList[i].customerId == row.customerId){
            index = i;
          }
        }
        if(index || index=='0'){
          this.userSelectList.splice(index,1)
        }else{
          this.userSelectList.push(row);
        }
      },
      handleUserSearch(){
        this.userForm.pageNum = 1;
        this.userInfo();
      },
      async userInfo() {
        try {
          this.loading = true;
          const result = await customerList(this.userForm);
          if (result.code == 200) {
            this.userForm.total = result.total;
            this.userList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      fileChange (e) {
        this.file = e.target.files[0];


        if (!this.file) {
          alert("请先选择需要上传的文件!")
          return
        }
        var objUrl = this.getObjectURL(e.target.files[0]);
               console.log("objUrl = " + objUrl);
        this.videoUrl = objUrl;
        var Title = this.file.name
        var userData = '{"Vod":{}}'
        if (this.uploader) {
          this.uploader.stopUpload()
          this.authProgress = 0
          this.statusText = ""
        }
        this.uploader = this.createUploader()
        console.log(userData)
        this.uploader.addFile(this.file, null, null, null, userData)
        this.uploadDisabled = false
        this.pauseDisabled = true
        this.resumeDisabled = true
        setTimeout(()=>{this.authUpload()},1000)
      },
      //建立一个可存取到该file的url
       getObjectURL(file) {
              var url = null;
              if (window.createObjectURL != undefined) { // basic
                  url = window.createObjectURL(file);
              } else if (window.URL != undefined) { // mozilla(firefox)
                  url = window.URL.createObjectURL(file);
              } else if (window.webkitURL != undefined) { // webkit or chrome
                  url = window.webkitURL.createObjectURL(file);
              }
              return url;
          },
      authUpload () {
        // 然后调用 startUpload 方法, 开始上传
        if (this.uploader !== null) {
          this.uploader.startUpload()
          this.uploadDisabled = true
          this.pauseDisabled = false
        }
      },
      // 暂停上传
      pauseUpload () {
        if (this.uploader !== null) {
          this.uploader.stopUpload()
          this.resumeDisabled = false
          this.pauseDisabled = true
        }
      },
      // 恢复上传
      resumeUpload () {
        if (this.uploader !== null) {
          this.uploader.startUpload()
          this.resumeDisabled = true
          this.pauseDisabled = false
        }
      },
      createUploader (type) {
        let self = this;
        let url = ''
        let uploader = new AliyunUpload.Vod({
          timeout: self.timeout || 60000,
          partSize: Math.round(self.partSize || 1048576),
          parallel: self.parallel || 5,
          retryCount: self.retryCount || 3,
          retryDuration: self.retryDuration || 2,
          region: self.region,
          userId: self.userId,
          // 添加文件成功
          addFileSuccess: function (uploadInfo) {
            self.uploadDisabled = false
            self.resumeDisabled = false
            self.statusText = '添加文件成功, 等待上传...'
            console.log("addFileSuccess: " + uploadInfo.file.name)
            url = uploadInfo.file.name;
          },
          // 开始上传
          onUploadstarted: function (uploadInfo) {
            // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
            // 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
            // 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
            // 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
            // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
            // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
            console.log(123123);
            console.log(uploadInfo);
            if (!uploadInfo.videoId) {
              console.log(333)
                console.log(uploadInfo);
              let createUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/CreateUploadVideo?Title=testvod1&FileName=aa.mp4&BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&VideoId=5bfcc7864fc14b96972842172207c9e6'
              getUploadAuth({fileName:url,title:self.setMsgForm.comment}).then(res => {
                let data = res.data;
                console.log(data);
                let uploadAuth = data.uploadAuth
                let uploadAddress = data.uploadAddress
                let videoId = data.videoId;
               self.setMsgForm.thirdVideoId = videoId;
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId)
              })
              self.statusText = '文件开始上传...'
              console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
            } else {
                console.log(444)
              // 如果videoId有值，根据videoId刷新上传凭证
              // https://help.aliyun.com/document_detail/55408.html?spm=a2c4g.11186623.6.630.BoYYcY
              let refreshUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' + uploadInfo.videoId
              axios.get(refreshUrl).then(({data}) => {
                let uploadAuth = data.UploadAuth
                let uploadAddress = data.UploadAddress
                let videoId = data.VideoId
                self.setMsgForm.thirdVideoId = videoId;
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId)
              })
            }
          },
          // 文件上传成功
          onUploadSucceed: function (uploadInfo) {
            console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
            self.statusText = '文件上传成功!'
          },
          // 文件上传失败
          onUploadFailed: function (uploadInfo, code, message) {
            console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
            self.statusText = '文件上传失败!'
          },
          // 取消文件上传
          onUploadCanceled: function (uploadInfo, code, message) {
            console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
            self.statusText = '文件已暂停上传'
          },
          // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
          onUploadProgress: function (uploadInfo, totalSize, progress) {
            console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
            let progressPercent = Math.ceil(progress * 100)
            self.authProgress = progressPercent
            self.statusText = '文件上传中...'
          },
          // 上传凭证超时
          onUploadTokenExpired: function (uploadInfo) {
            // 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
            // 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
            // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
            let refreshUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' + uploadInfo.videoId
            axios.get(refreshUrl).then(({data}) => {
              let uploadAuth = data.UploadAuth
              uploader.resumeUploadWithAuth(uploadAuth)
              console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
            })
            self.statusText = '文件超时...'
          },
          // 全部文件上传结束
          onUploadEnd: function (uploadInfo) {
            console.log("onUploadEnd: uploaded all the files")
            self.statusText = '文件上传完毕'
          }
        })
        return uploader
      },
      async getVideoDetail() {
        try {
          this.loading = true;
          const result = await videoDetail(this.id);
          if (result.code == 200) {
            this.setMsgForm.id = result.data.id;
            this.setMsgForm.comment = result.data.comment;
            this.setMsgForm.thirdVideoId = result.data.thirdVideoId;
            this.setMsgForm.isPublic = result.data.isPublic+'';
            this.setMsgForm.customerId = result.data.customerId;
            this.setMsgForm.codes = [result.data.provinceCode,result.data.cityCode];
            this.customerName = result.data.nickname +'('+result.data.telephone+')'
            console.log(this.setMsgForm.codes);
            this.$nextTick(()=>{
              this.areaVisible = true;
            })
            this.videoUrl = result.data.url;

          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      hanleSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            let data = JSON.parse(JSON.stringify(this.setMsgForm));
            data.title = data.comment;
            if(data.codes){
              data.provinceCode = data.codes[0];
              data.cityCode = data.codes[1];
            }
            if(this.id){
              videoEdit(data).then((result) => {
               if (result.code == 200) {
                 this.$message.success(result.msg);
                 this.$router.go(-1);
               } else {
                 this.$message.error(result.msg);
               }
               this.btnLoading = false;
               });
            }else{
              videoAdd(data).then((result) => {
               if (result.code == 200) {
                 this.$message.success(result.msg);
                 this.$router.go(-1);
               } else {
                 this.$message.error(result.msg);
               }
               this.btnLoading = false;
               });
            }
            


          }
        })
      },
      async getTree() {
        try {
          const result = await goodsCategoryList();
          if (result.code == 200) {
            this.deptOptions = result.data
          } else {
            this.$message.error(result.msg);
          }
        } catch (err) {
          console.log(err)
        }
      },
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.categoryId,
          label: node.categoryName,
          children: node.children
        };
      },
      imageChange(path) {
        this.setMsgForm.image = path;
      },
      back(){
          this.$router.go(-1);//返回上一层
      },
    }
  }
</script>

<style scoped lang="scss">
  .selectCustomerName{
    color:#61997A;
    margin-left:8px;
  }
  .activeBox{
    display:flex;
    justify-content:center;
  }
  .upGoodBox{
    height:100px;
    display:flex;
    align-items:center;
    justify-content: center;
    background: rgba(158, 187, 169, 0.15);
    color:#3A7654;
    margin-bottom:20px;
  }

  .el-checkbox-group{
    display: flex;
    flex-direction: column;
  }
  .jobNumber{
    text-align:center;
    color:#606266;
    margin:0;
  }
  .index-box /deep/ .el-checkbox{
    margin-bottom:15px;
  }
  .auditBox{
    padding: 20px 50px;
    background: rgba(158, 187, 169, 0.15);
    margin-bottom:20px;
    .steps{
      max-width:500px;
      margin:0 auto;
    }
  }
  .goodSet{
    padding: 50px 50px 30px 50px;
    background: rgba(158, 187, 169, 0.15);
    margin-bottom:20px;
    color:#606266;

  }
  .title{
    text-align: center;
    font-size:18px;
    margin-bottom:20px;
  }
  .el-icon-edit-outline{
    color: rgb(97, 153, 122);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .myQuillEditor{
    height:250px;
  }
  table {
    width: 100%;
  }

  th {
    height: 50px;
    text-align: left;
    border-bottom: 1px solid #EBEEF5!important;
    color:#909399;
    padding:0 5px;

  }
  table{
    border: 1px solid #EBEEF5;
  }
  td, th{
    border:none;
    white-space: nowrap;
    min-width: 80px;
  }
  td{padding:5px}
  .index-box{
    height:100%;
    overflow-y: auto;
  }
  .shop-box{
    margin: 0 auto;
    .left{
      width:50%;
      padding:0 10px;
    }
    .right{
      width:50%;
      padding:0 10px;
    }
  }
  .rows>div,.rows>button{
    margin-bottom: 5px;
  }
  .input{
    width:180px;
    margin-right:10px;
  }
  .form{
    padding:20px 0;
  }
  .boxs /deep/ .el-radio-group{
    	display: flex;
    	flex-wrap: wrap;
    }
    .boxs /deep/ .el-radio-group .el-radio{
    	width:100%;
    	margin-bottom: 10px;
    }
   .form /deep/ .avatar-uploader .el-upload-list__item{display: none;}
  .avatar-uploader{
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      height:100px;
      width:100px;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
        height: 30px;
        line-height: 30px;
        margin-top: 15px;
        margin-bottom: 10px;
        font-size: 28px;
        color: #8c939d;
    }
    .d-flex /deep/ .el-upload{
      display: block;
    }
    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
    .text{
      margin: 0px;
      color: #8c939d;
    }
    .upImg /deep/ .el-upload--text{
      height:100%
    }
    .activeBox{
      display: flex;
      justify-content: center;
    }
    .el-upload-list--picture-card .el-upload-list__item{
        width:100px;
        height:100px;
    }
    .shop-box{
      margin: 0 auto;
      .left{
        width:50%;
        padding:0 10px;
      }
      .right{
        width:50%;
        padding:0 10px;
      }
    }
</style>
